<template>
    <div>

        <testheader></testheader>

        <input type="text" v-model="message" />

        {{ message }}

        <br />

        {{ reverse_message }}

        <br /><br />

        千米: <input type="text" v-model = "kilometers" />
        米: <input type="text" v-model = "meters" /> 

        <br /><br />

        <div v-show="flag">

            你能看见我

        </div>

        <br /><br />

        <div v-if="num==9">

            num == 9

        </div>
        <div v-else-if="num==10">

            num == 10

        </div>
        <div v-else>

            num !=9 && num != 10

        </div>


        <br /><br />

        <ul>

            <li v-for='(item,index) in tlist' :class="{on:index%2==0,off:index%2!=0}">

                {{ item.text }}

            </li>


        </ul>

        <br /><br />

        <table>

            <tr v-for="(item,index) in datalist">

                <td>

                    {{ item.name}}

                </td>

                <td>

                    <button @click="minus(index)">-</button>

                    <input type="text" v-model="item.num" />

                    <button @click="add(index)">+</button>
    
                </td>

            </tr>

        </table>

        <button @click="add_cart('宝马')">添加宝马</button>
        <button @click="add_cart('电脑')">添加电脑</button>

        <br />
        {{ totalCount() }}

    </div>
</template>

<script>
    //导入子组件
    import testheader from './testheader'

    export default {

        data(){
            return {
                message:'hello world',
                kilometers:0,
                meters:0,
                flag:true,
                num:8,
                tlist:[{text:'汽车'},{text:'面包'},{text:'牛奶'},{text:'鲜花'}],
                datalist:[]
            }
        },
        //定义组建标签
        components:{
            'testheader':testheader
        },
        //自定义方法
        methods:{
            //汇总商品数量
            totalCount:function(){

                //默认数量
                let total = 0;
                //遍历
                for(let i=0,l=this.datalist.length;i<l;i++){

                        total += this.datalist[i].num;
                }

                return total;


            },
            //减少商品数量
            minus:function(index){
                if(this.datalist[index].num > 0){
                this.datalist[index].num--;
            }
            },
            //增加商品数量
            add:function(index){
              
                this.datalist[index].num++;
            
            },
            //添加购物车
            add_cart:function(name){
                //声明购物车变量
                let cartlist = this.datalist;
                //声明坐标
                let findgood = 0;
                //遍历购物车列表
                for(let i=0,l=cartlist.length;i<l;i++){

                    //判断逻辑
                    if(name == cartlist[i]['name']){

                            cartlist[i]['num']++;
                            findgood = 1;
                            break;
                    }
                }
                if(findgood==0){
                    cartlist.push({name:name,num:1});
                }
                //重新赋值
                this.datalist = cartlist;
            }

        },
        //钩子方法
        mounted:function(){

            console.log('这是初始化方法');

        },
        //监听属性
        watch:{

            kilometers:function(val){

                this.kilometers = val;
                this.meters = val * 1000;

            },
            meters:function(val){

                this.kilometers = val / 1000;
                this.meters = val


            }


        },
        //计算属性
        computed:{

            reverse_message:function(){

                //反转逻辑
                return '$'+this.message.split('').reverse().join('')

            }


        }



    }


</script>

<style>

    .on { background:rebeccapurple}
    .off {background: red}

</style>